<template>
  <div>
    <div class="cashItemContainer" @click="bindInfo" v-if="!bank">
      <x-icon type="ios-plus" size="30"></x-icon>
      <slot></slot>
    </div>
    <div v-else class="cashItemContainer" @click="showInfo">
      <div class="accoutBox">
        <x-img :src="banks[bank.bankName]"></x-img>{{this.banks.name}}
        <div class="accout">
          <div style="font-size:0.29rem">
            <h3 v-text="bank.bankName" style="font-size:.46rem;color:#000"></h3>
            {{(this.bank.bankNum||'') | hideNum}}
            <button class="change" @click="changeBank">更换</button>
          </div>
        </div>
      </div>
      <div class="showBankInfo" v-if="showBankInfo">
        <Info :content='name||""'></Info>
        <Info :content='idcard||""'></Info>
        <Info :content='bank.bankName||""'></Info>
        <Info :content='bank.bankNameZH||""'></Info>
        <Info :content='bank.bankNum||""'></Info>
        <Info :content='bank.bankPhone||""'></Info>
      </div>
    </div>
  </div>
</template>
<script>
import { XImg } from 'vux'
import {BANKS} from '../../../../service/getData.js'
import {getBindInfo} from '../../../../service/getData'
import {getStore} from '../../../../config/mUtils'
import Info from '../../../component/common/BankInfo'

export default {
  components:{
    XImg,
    Info
  },
  data(){
    return {
      banks:BANKS,
      name:'',
      showBankInfo:false
    }
  },
  props:["bank","name","idcard"],
  methods:{
    showInfo(){
      this.showBankInfo = !this.showBankInfo
    },
    bindInfo(){
      this.$router.push('/cashManager/bindBank')
    },
    changeBank(){
      this.$router.push('/cashManager/changeBank')
    }
  },
  filters:{
    hideNum(val){
      return val.replace(/(\w{4})[^\n]*(\w{4})/,'$1 **** **** $2')
    }
  }
}
</script>
<style lang="less">
  @import '../../../../style/mixin.less';

  .cashItemContainer{
    .wh(100%,2.6933rem);
    .fx(row,flex-start);
    .bs();
    position: relative;
    padding-left: 0.6933rem;
    box-shadow:2px 2px 10px #aaa;
    margin-bottom: 0.2667rem;
    .sc(0.44rem,#c7c7c7);
    .vux-x-icon {
      .wh(.8rem,.8rem);
      fill: #ededed;
      margin-right: 0.4533rem;
    }
    .accoutBox{
      .wh(100%,2rem);
      .fx(row,flex-start,center);
      img{
        .wh(0.8533rem,0.8533rem);
        margin-right: 0.2933rem;
      }
      .accout{
        display: inline-block;
        margin-right: 1rem;
        width:6rem;
      }
    }
    .showBankInfo{
      .wh(7.84rem,6rem);
      .fx(column,space-bewteen);
      .bg(#ffffff);
      box-shadow:2px 2px 10px #aaa;
      position: absolute;
      z-index: 2;
      top: 1.7rem;
      left: 1.4rem;
    }
    .change{
      .wh(1.76rem,0.8267rem);
      .borderRadius(2rem);
      border: 1px solid #939393;
      .bg(#fff);
      .allcover();
      top:1rem;
      right: .7rem;;
    }
  }
</style>
